<template>
  <Row>
    <Col :xs="24" :xxl="8">
      <div class="page-gird-container" style="margin-right: 24px">
        <Circle
          :percent="80"
          dashboard
          stroke-width="10"
          trail-width="10"
          stroke-color="#f60"
          size="160"
        >
          <p class="demo-circle-inner">中</p>
          <p style="color: #a3a3a3; font-size: 14px">安全等级</p>
        </Circle>
        <Form label-position="left" label-width="120">
          <FormItem label="账号ID">
            <Input v-model="data.name" :border="false" :readonly="true"></Input>
          </FormItem>
          <FormItem label="账号类型">
            <Input
              v-model="accountType"
              :border="false"
              :readonly="true"
            ></Input>
          </FormItem>
          <FormItem label="认证信息">
            <Input v-model="realName" :border="false" :readonly="true"></Input>
          </FormItem>
          <FormItem label="上次登陆时间">
            <Input
              v-model="data.login_time"
              :border="false"
              :readonly="true"
              style="width: 250px"
            >
            </Input>
            <router-link to="" style="float: right" @click="toLogonLog"
              >更多></router-link
            >
          </FormItem>
        </Form>
      </div>
    </Col>
    <Col :xs="24" :xxl="16">
      <div class="page-gird-container">
        <ul>
          <li>
            <Icon type="ios-unlock-outline" />
            <div class="bd-solid-line-ebebeb">
              <div>
                <p class="font-size-md">登录密码</p>
                <p class="color-default-gray">
                  安全性高的密码可以使账户更安全；互联网账号存在被盗风险，建议您定期更换密码。
                </p>
              </div>
              <div style="display: flex; align-items: center">
                <Alert
                  type="success"
                  show-icon
                  style="
                    border: none;
                    background-color: white;
                    color: #19be6b;
                    padding-right: 16px;
                  "
                  >已设置</Alert
                >
                <span class="inline-block"></span>
                <Button
                  type="primary"
                  ghost
                  size="small"
                  style="margin-left: 16px"
                  @click="toPasswordRevise"
                  >修改</Button
                >
              </div>
            </div>
          </li>
          <li>
            <Icon type="ios-phone-portrait" />
            <div class="bd-solid-line-ebebeb">
              <div>
                <p class="font-size-md">手机号绑定</p>
                <p class="color-default-gray">
                  (+86){{
                    data.mobile
                  }}您的手机号为安全手机号，可以用于登录、重置密码和接收重要通知等。
                </p>
              </div>
              <div style="display: flex; align-items: center">
                <Alert
                  type="success"
                  show-icon
                  style="
                    border: none;
                    background-color: white;
                    color: #19be6b;
                    padding-right: 16px;
                  "
                  >已设置</Alert
                >
                <span class="inline-block"></span>
                <Button
                  type="primary"
                  ghost
                  size="small"
                  style="margin-left: 16px"
                  @click="toSet('mobile')"
                  >修改</Button
                >
              </div>
            </div>
          </li>
          <li>
            <Icon type="ios-mail-outline" />
            <div class="bd-solid-line-ebebeb">
              <div>
                <p class="font-size-md">安全邮箱</p>
                <p class="color-default-gray">
                  您的邮箱为安全邮箱，可以用于登录、重置密码和接收重要通知等。
                </p>
              </div>
              <div style="display: flex; align-items: center">
                <Alert
                  v-if="data.email"
                  type="success"
                  show-icon
                  style="
                    border: none;
                    background-color: white;
                    color: #19be6b;
                    padding-right: 16px;
                  "
                  >已设置</Alert
                >
                <Alert
                  v-else
                  type="warning"
                  show-icon
                  style="
                    border: none;
                    background-color: white;
                    color: #f60;
                    padding-right: 16px;
                  "
                  >未设置</Alert
                >
                <span class="inline-block"></span>
                <Button
                  type="primary"
                  ghost
                  size="small"
                  style="margin-left: 16px"
                  @click="toSet('email')"
                  >绑定</Button
                >
              </div>
            </div>
          </li>
          <li style="margin-bottom: 0">
            <Icon type="ios-contact-outline" />
            <div class="bd-solid-line-ebebeb">
              <div>
                <p class="font-size-md">操作保护</p>
                <p class="color-default-gray">
                  您及子用户进行高危操作时，需要通过短信校验身份，以保障账号安全性。
                </p>
              </div>
              <div style="display: flex; align-items: center">
                <Alert
                  type="success"
                  show-icon
                  style="
                    border: none;
                    background-color: white;
                    color: #19be6b;
                    padding-right: 16px;
                  "
                  >已开启</Alert
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </Col>
  </Row>
</template>

<script>
    import cookies from '@/libs/util.cookies';

    export default {
        name: "set-accountSecurity",
        data() {
            return {
                data: {},
                accountType: "",
                realName: "",
            };
        },
        methods: {
            toSet(val) {
                this.$router.push({
                    path: "personalData",
                    query: { val },
                });
            },
            toLogonLog() {
                this.$router.push("logonLog");
            },
            toPasswordRevise() {
                this.$router.push("passwordRevise");
            },
        },
        created() {
            this.data = JSON.parse(cookies.get('info'));
            if (this.data.realName == 0) {
                this.realName = "未实名认证";
            } else if (this.data.realName == 1 && this.data.enterprise == 0) {
                this.accountType = "个人";
                this.realName = "已实名认证";
            } else if (this.data.realName == 1 && this.data.enterprise == 1) {
                this.accountType = "企业";
                this.realName = "已实名认证";
            }
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  display: flex;
  flex-direction: column;
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  background-color: #fff;
  ul {
    li {
      display: flex;
      list-style: none;
      margin-bottom: 20px;
      .ivu-icon {
        color: #08f;
        font-size: 20px;
        font-weight: bold;
        margin: 2px 12px 0 0;
      }
      .bd-solid-line-ebebeb {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ebebeb;
        .font-size-md {
          font-size: 16px;
          margin-bottom: 6px;
        }
        .color-default-gray {
          margin-bottom: 20px;
          color: #a3a3a3;
        }
      }
    }
  }
}
.demo-circle-inner {
  color: #f60;
  font-size: 18px;
  margin-bottom: 8px;
}
.ivu-chart-circle {
  align-self: center;
}
.ivu-form-item:not(:last-child) {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(235, 235, 235);
}
.ivu-form-item:last-child {
  margin-bottom: 0;
}
.m-b-20 {
  margin-bottom: 20px;
}
.inline-block {
  display: inline-block;
  width: 1px;
  height: 24px;
  background-color: rgb(235, 235, 235);
}
.ivu-alert {
  margin-bottom: 0;
}
</style>
